<!DOCTYPE HTML>
<html>
  <head>
    <title>Basic HTML Elements test</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <h1>body text</h1>
        <p>Japan has a total of 6,852 islands extending along the Pacific coast of East Asia. The country, including all of the islands it controls, lies between latitudes 24° and 46°N, and longitudes 122° and 146°E. The main islands, from north to south, are Hokkaidō, Honshū, Shikoku and Kyūshū. The Ryūkyū Islands, including Okinawa, are a chain to the south of Kyūshū. Together they are often known as the Japanese Archipelago. About 73 percent of Japan is forested, mountainous, and unsuitable for agricultural, industrial, or residential use. As a result, the habitable zones, mainly located in coastal areas, have extremely high population densities. Japan is one of the most densely populated countries in the world.</p>
        <p>「日本」という国号の表記は、太陽崇拝と相俟った自国中心的発想に基づくもの、また日本列島が中国大陸から見て東の果て、つまり「日の本（ひのもと）」に位置することに由来しているのではないかとされる[1]。憲法の表題に「日本国憲法」や「大日本帝国憲法」と示されているが、国号を「日本国」ないしは「日本」と直接かつ明確に規定した法令は存在しない。他に法律などで正式な国名を規定していない国としてはスペインなどが挙げられる。</p>
      </div>
      <div class="row">
        <h1>heading1</h1>
        <h2>heading2</h2>
        <h3>heading3</h3>
        <h4>heading4</h4>
        <h5>heading5</h5>
        <h6>heading6</h6>
      </div>
      <div class="row">
        <h1>strong</h1>
        <p>hello <strong>world</strong></p>
      </div>
      <div class="row">
        <h1>em</h1>
        <p>hello <em>world</em></p>
      </div>
      <div class="row">
        <h1>abbr</h1>
        <p><abbr title="Hyper Text Markup Language">HTML</abbr> is the best thing since sliced bread.</p>
      </div>
      <div class="row">
        <h1>address</h1>
        <address>
          <strong>Mail</strong>
          <br />
          <a href="#">foo@domain.com</a>
        </address>
      </div>
      <div class="row">
        <h1>blockquote & small</h1>
        <div class="column6">
          <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
            <small>Someone famous in </small><cite title>Body of work</cite>
          </blockquote>
        </div>
        <div class="column6">
          <blockquote class="pull-right">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
            <small>Someone famous in <cite title="">Body of work</cite></small>
          </blockquote>
        </div>
      </div>

      <div class="row">
        <h1>Lists</h1>
        <div class="column3">
          <h2>Unordered</h2>
          <ul>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit
            <ul>
              <li>Phasellus iaculis neque</li>
              <li>Purus sodales ultricies</li>
              <li>Vestibulum laoreet porttitor sem</li>
              <li>Ac tristique libero volutpat at</li>
            </ul>
            </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ul>
        </div>
        <div class="column3">
          <h2>nostyled</h2>
          <ul class="nostyled">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit
            <ul>
              <li>Phasellus iaculis neque</li>
              <li>Purus sodales ultricies</li>
              <li>Vestibulum laoreet porttitor sem</li>
              <li>Ac tristique libero volutpat at</li>
            </ul>
            </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ul>
        </div>
        <div class="column3">
          <h2>Ordered</h2>
          <ol>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit</li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ol>
        </div>
        <div class="column3">
          <h2>Description</h2>
          <dl>
            <dt>Description lists</dt>
            <dd>A description list is perfect for defining terms.</dd>
            <dt>Euismod</dt>
            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
            <dt>Malesuada porta</dt>
            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
          </dl>
        </div>
      </div>

      <div class="row">
        <h1>Code</h1>
        <div class="column6">
          <h2>Inline</h2>
          <pre>For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.</pre>
        </div>
        <div class="column6">
          <h2>Basic Block</h2>
          <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
          <pre class="pre-scrollable" style="margin-bottom: 9px;">&lt;pre&gt; &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt; &lt;/pre&gt;</pre>
          <p><strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
          <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
        </div>
      </div>
      
      <div class="row">
        <h1>Default table styles</h1>
        <table class="table">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Language</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>CSS</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>Javascript</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Stu</td>
              <td>Dent</td>
              <td>HTML</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="row">
        <h1>Striped table</h1>
        <table class="table table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Language</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>CSS</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>Javascript</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Stu</td>
              <td>Dent</td>
              <td>HTML</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="row">
        <h1>Bordered table</h1>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Language</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td colspan="2">Mark Otto</td>
              <td>CSS</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Jacob</td>
              <td>Thornton</td>
              <td rowspan="2">Javascript</td>
            </tr>
          </tr>
          <td>3</td>
          <td>Stu</td>
          <td>Dent</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Brosef</td>
          <td>Stalin</td>
          <td>HTML</td>
        </tr>
      </tbody>
    </table>
      </div>

      <div class="row">
        <h1>Condensed table</h1>
        <table class="table table-condensed">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Language</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>CSS</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>Javascript</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Stu</td>
              <td>Dent</td>
              <td>HTML</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="row">
        <h1> Combine them all</h1>
        <table class="table table-striped table-bordered table-condensed">
          <thead>
            <tr>
              <th>#</th>
              <th class="yellow">First Name</th>
              <th class="blue">Last Name</th>
              <th class="green">Language</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>CSS</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>Javascript</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Stu</td>
              <td>Dent</td>
              <td>HTML</td>
            </tr>
            <tr>
              <td>4</td>
              <td>Brosef</td>
              <td>Stalin</td>
              <td>HTML</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="row">
        <h1>Basic form</h1>
        <form>
          <label>Label name</label>
          <input type="text" class="span3" placeholder="Type something…">
          <span class="help-inline">Associated help text!</span>
          <label class="checkbox">
            <input type="checkbox"> Check me out
          </label>
          <button type="submit" class="button">Submit</button>
        </form>
      </div>

      <div class="row">
        <h1>Search form</h1>
        <form class="form-search">
          <input type="text" class="input-medium search-query">
          <button type="submit" class="button">Search</button>
        </form>
      </div>

      <div class="row">
        <h1>Inlin form</h1>
        <form class="form-inline">
          <input type="text" class="input-small" placeholder="Email">
          <input type="password" class="input-small" placeholder="Password">
          <label class="checkbox">
            <input type="checkbox"> Remember?
          </label>
          <button type="submit" class="button">Sign in</button>
        </form>
      </div>


      <div class="row">
        <h1>Horizontal form</h1>
      </div>

      <div class="row">
        <form class="form-horizontal">
          <fieldset>
            <legend>Controls</legend>
            <div class="control-group">
              <label class="control-label" for="input01">Text input</label>
              <div class="controls">
                <input type="text" class="input-xlarge" id="input01">
                <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="optionsCheckbox">Checkbox</label>
              <div class="controls">
                <label class="checkbox">
                  <input type="checkbox" id="optionsCheckbox" value="option1">
                  Option one is this and that&mdash;be sure to include why it's great
                </label>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="select01">Select list</label>
              <div class="controls">
                <select id="select01">
                  <option>something</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="multiSelect">Multicon-select</label>
              <div class="controls">
                <select multiple="multiple" id="multiSelect">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="fileInput">File input</label>
              <div class="controls">
                <input class="input-file" id="fileInput" type="file">
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="textarea">Textarea</label>
              <div class="controls">
                <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
              </div>
            </div>
            <div class="form-actions">
              <button type="submit" class="button button-primary">Save changes</button>
              <button class="button">Cancel</button>
            </div>
          </fieldset>
        </form>
      </div>

      <div class="row">
        <form class="form-horizontal">
          <fieldset>
            <legend>Form control state</legend>
            <div class="control-group">
              <label class="control-label" for="focusedInput">Focused input</label>
              <div class="controls">
                <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">Uneditable input</label>
              <div class="controls">
                <span class="input-xlarge uneditable-input">Some value here</span>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="disabledInput">Disabled input</label>
              <div class="controls">
                <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
              <div class="controls">
                <label class="checkbox">
                  <input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
                  This is a disabled checkbox
                </label>
              </div>
            </div>
            <div class="control-group warning">
              <label class="control-label" for="inputWarning">Input with warning</label>
              <div class="controls">
                <input type="text" id="inputWarning">
                <span class="help-inline">Something may have gone wrong</span>
              </div>
            </div>
            <div class="control-group error">
              <label class="control-label" for="inputError">Input with error</label>
              <div class="controls">
                <input type="text" id="inputError">
                <span class="help-inline">Please correct the error</span>
              </div>
            </div>
            <div class="control-group success">
              <label class="control-label" for="inputSuccess">Input with success</label>
              <div class="controls">
                <input type="text" id="inputSuccess">
                <span class="help-inline">Woohoo!</span>
              </div>
            </div>
            <div class="control-group success">
              <label class="control-label" for="selectError">Select with success</label>
              <div class="controls">
                <select id="selectError">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
                <span class="help-inline">Woohoo!</span>
              </div>
            </div>
            <div class="form-actions">
              <button type="submit" class="button button-primary">Save changes</button>
              <button class="button">Cancel</button>
            </div>
          </fieldset>
        </form>
      </div>

      <div class="row">
        <form class="form-horizontal">
          <fieldset>
            <legend>Extending form controls</legend>
            <div class="control-group">
              <div class="controls docs-input-sizes">
                <input class="column1" type="text" placeholder=".column1">
                <input class="column2" type="text" placeholder=".column2">
                <input class="column3" type="text" placeholder=".column3">
                <select class="column1">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
                <select class="column2">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
                <select class="column3">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
                <p class="help-block">Use the same <code>.column*</code> classes from the grid system for input sizes.</p>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">Alternate sizes</label>
              <div class="controls docs-input-sizes">
                <input class="input-mini" type="text" placeholder=".input-mini">
                <input class="input-small" type="text" placeholder=".input-small">
                <input class="input-medium" type="text" placeholder=".input-medium">
                <p class="help-block">You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).</p>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="prependedInput">Prepended text</label>
              <div class="controls">
                <div class="input-prepend">
                  <span class="add-on">@</span>
                  <input class="column2" id="prependedInput" size="16" type="text">
                </div>
                <p class="help-block">Here's some help text</p>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="appendedInput">Appended text</label>
              <div class="controls">
                <div class="input-append">
                  <input class="column2" id="appendedInput" size="16" type="text">
                  <span class="add-on">.00</span>
                </div>
                <p class="help-block">Here's more help text</p>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="inlineCheckboxes">Inline checkboxes</label>
              <div class="controls">
                <label class="checkbox inline">
                  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
                </label>
                <label class="checkbox inline">
                  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
                </label>
                <label class="checkbox inline">
                  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
                </label>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="optionsCheckboxList">Checkboxes</label>
              <div class="controls">
                <label class="checkbox">
                  <input type="checkbox" name="optionsCheckboxList1" value="option1">
                  Option one is this and that&mdash;be sure to include why it's great
                </label>
                <label class="checkbox">
                  <input type="checkbox" name="optionsCheckboxList2" value="option2">
                  Option two can also be checked and included in form results
                </label>
                <label class="checkbox">
                  <input type="checkbox" name="optionsCheckboxList3" value="option3">
                  Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results
                </label>
                <p class="help-block"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">Radio buttons</label>
              <div class="controls">
                <label class="radio">
                  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                  Option one is this and that&mdash;be sure to include why it's great
                </label>
                <label class="radio">
                  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                  Option two can is something else and selecting it will deselect option one
                </label>
              </div>
            </div>
            <div class="form-actions">
              <button type="submit" class="button button-primary">Save changes</button>
              <button class="button">Cancel</button>
            </div>
          </fieldset>
        </form>
      </div>

      <div class="row">
        <h1>buttons</h1>
        <button class="button" href="#">Default</button>
        <button class="button button-primary" href="#">Primary</button>
        <button class="button button-info" href="#">Info</button>
        <button class="button button-success" href="#">Success</button>
        <button class="button button-warning" href="#">Warning</button>
        <button class="button button-danger" href="#">Danger</button>
        <button class="button button-inverse" href="#">Inverse</button>
      </div>

      <div class="row">
        <h1>buttons size</h1>
        <div class="column4">
          <button class="button button-large button-primary" href="#">Primary Action</button>
          <button class="button button-large" href="#">Action</button>
        </div>
        <div class="column4">
          <button class="button button-small button-primary" href="#">Primary Action</button>
          <button class="button button-small" href="#">Action</button>
        </div>
        <div class="column4">
          <button class="button button-mini button-primary" href="#">Primary Action</button>
          <button class="button button-mini" href="#">Action</button>
        </div>
      </div>

      <div class="row">
        <h1>buttons disable state</h1>
        <div class="column6">
          <a class="button button-large button-primary disabled" href="#">Primary Link</a>
          <a class="button button-large disbled" href="#">Link</a>
        </div>
        <div class="column6">
          <button class="button button-large button-primary" disabled="disabled" href="#">Primary Button</button>
          <button class="button button-large" href="#" disabled>Button</button>
        </div>
      </div>

      <div class="row">
        <h1>buttons multiple tags</h1>
        <a class="button button-large" href="#">Link</a>
        <button class="button button-large" href="#">Button</button>
        <input type="button" class="button button-large" value="Input">
        <input type="submit" class="button button-large" value="Submit">
      </div>

    </div>
  </body>
</html>
